<!DOCTYPE html>
<html lang="en">

<head>
    <meta charset="UTF-8">
    <meta http-equiv="X-UA-Compatible" content="IE=edge">
    <meta name="viewport" content="width=device-width, initial-scale=1.0">
    <title>CSS画几何</title>
    <style>
        /* 然后我们可以通过给任意三边的颜色设置为 transparent 即可分别实现任一方向的三角形。 */
        /* 三角形 */
        .triangle {
            width: 0;
            height: 0;
            border: 100px solid transparent;
            border-bottom: 100px solid lightblue;
        }

        /* 梯形 */
        .trapezoid {
            width: 100px;
            height: 100px;
            border: 100px solid transparent;
            border-bottom: 100px solid lightgreen;
        }

        /* 圆形 */
        .circular {
            /* border-radius四个值的顺序是：左上角，右上角，右下角，左下角 */
            border-radius: 50%;
            width: 100px;
            height: 100px;
            background: lightsalmon;
        }

        /* 扇形 */
        .sector {
            /* border-radius四个值的顺序是：左上角，右上角，右下角，左下角 */
            border-radius: 100% 0 0 0;
            width: 100px;
            height: 100px;
            background: lightgray;
        }

        /* 椭圆 */
        .oval {
            width: 100px;
            height: 50px;
            background: lightcyan;
            border-radius: 50%;
        }
    </style>

</head>

<body>
    <div class="triangle"></div>
    <div class="trapezoid"></div>
    <div class="circular"></div>
    <div class="sector"></div>
    <div class="oval"></div>
</body>

</html>